<template >
    <div ref="reference" style="width:100%">
        <transition
            name="custom-classes-transition"
            enter-active-class="animated bounceInLeft"
            leave-active-class="animated bounceOutLeft"
            >
            <div class="main-box" v-show ='D3Show'>
                <div  class="clearfix" @click="$store.commit('SHOW_D3_BOX', false)">
                    <span style="font-size:16px;">目标网络信息</span>
                    <span style="font-size: 20px;line-height:35px;">
                        <el-tooltip content="收缩" placement="top">
                            <i class="el-icon-s-unfold" style="cursor: pointer"></i>
                        </el-tooltip>
                    </span>
                </div>
                <div class="D3Main" ref="D3Main">
                    <div class="D3Cabvas" id='canvas' ref="canvas">

                    </div>
                </div>
            </div>
        </transition> 
    </div>
</template>

<script lang='ts'>
import { Component , Vue} from 'vue-property-decorator';
import {mapGetters} from 'vuex'
import * as d3 from "d3";
@Component({
    computed:{
        ...mapGetters(['D3Show'])
    }
})
export default class D3 extends Vue {
    private data:any= {
        "nodes":[{"id":"Myriel","group":1},{"id":"Napoleon","group":1},{"id":"Mlle.Baptistine","group":1},{"id":"Mme.Magloire","group":1},{"id":"CountessdeLo","group":1},{"id":"Geborand","group":1},{"id":"Champtercier","group":1},{"id":"Cravatte","group":1},{"id":"Count","group":1},{"id":"OldMan","group":1},{"id":"Labarre","group":2},{"id":"Valjean","group":2},{"id":"Marguerite","group":3},{"id":"Mme.deR","group":2},{"id":"Isabeau","group":2},{"id":"Gervais","group":2},{"id":"Tholomyes","group":3},{"id":"Listolier","group":3},{"id":"Fameuil","group":3},{"id":"Blacheville","group":3},{"id":"Favourite","group":3},{"id":"Dahlia","group":3},{"id":"Zephine","group":3},{"id":"Fantine","group":3},{"id":"Mme.Thenardier","group":4},{"id":"Thenardier","group":4},{"id":"Cosette","group":5},{"id":"Javert","group":4},{"id":"Fauchelevent","group":0},{"id":"Bamatabois","group":2},{"id":"Perpetue","group":3},{"id":"Simplice","group":2},{"id":"Scaufflaire","group":2},{"id":"Woman1","group":2},{"id":"Judge","group":2},{"id":"Champmathieu","group":2},{"id":"Brevet","group":2},{"id":"Chenildieu","group":2},{"id":"Cochepaille","group":2},{"id":"Pontmercy","group":4},{"id":"Boulatruelle","group":6},{"id":"Eponine","group":4},{"id":"Anzelma","group":4},{"id":"Woman2","group":5},{"id":"MotherInnocent","group":0},{"id":"Gribier","group":0},{"id":"Jondrette","group":7},{"id":"Mme.Burgon","group":7},{"id":"Gavroche","group":8},{"id":"Gillenormand","group":5},{"id":"Magnon","group":5},{"id":"Mlle.Gillenormand","group":5},{"id":"Mme.Pontmercy","group":5},{"id":"Mlle.Vaubois","group":5},{"id":"Lt.Gillenormand","group":5},{"id":"Marius","group":8},{"id":"BaronessT","group":5},{"id":"Mabeuf","group":8},{"id":"Enjolras","group":8},{"id":"Combeferre","group":8},{"id":"Prouvaire","group":8},{"id":"Feuilly","group":8},{"id":"Courfeyrac","group":8},{"id":"Bahorel","group":8},{"id":"Bossuet","group":8},{"id":"Joly","group":8},{"id":"Grantaire","group":8},{"id":"MotherPlutarch","group":9},{"id":"Gueulemer","group":4},{"id":"Babet","group":4},{"id":"Claquesous","group":4},{"id":"Montparnasse","group":4},{"id":"Toussaint","group":5},{"id":"Child1","group":10},{"id":"Child2","group":10},{"id":"Brujon","group":4},{"id":"Mme.Hucheloup","group":8}],
        "links":[{"source":"Napoleon","target":"Myriel","value":1},{"source":"Mlle.Baptistine","target":"Myriel","value":8},{"source":"Mme.Magloire","target":"Myriel","value":10},{"source":"Mme.Magloire","target":"Mlle.Baptistine","value":6},{"source":"CountessdeLo","target":"Myriel","value":1},{"source":"Geborand","target":"Myriel","value":1},{"source":"Champtercier","target":"Myriel","value":1},{"source":"Cravatte","target":"Myriel","value":1},{"source":"Count","target":"Myriel","value":2},{"source":"OldMan","target":"Myriel","value":1},{"source":"Valjean","target":"Labarre","value":1},{"source":"Valjean","target":"Mme.Magloire","value":3},{"source":"Valjean","target":"Mlle.Baptistine","value":3},{"source":"Valjean","target":"Myriel","value":5},{"source":"Marguerite","target":"Valjean","value":1},{"source":"Mme.deR","target":"Valjean","value":1},{"source":"Isabeau","target":"Valjean","value":1},{"source":"Gervais","target":"Valjean","value":1},{"source":"Listolier","target":"Tholomyes","value":4},{"source":"Fameuil","target":"Tholomyes","value":4},{"source":"Fameuil","target":"Listolier","value":4},{"source":"Blacheville","target":"Tholomyes","value":4},{"source":"Blacheville","target":"Listolier","value":4},{"source":"Blacheville","target":"Fameuil","value":4},{"source":"Favourite","target":"Tholomyes","value":3},{"source":"Favourite","target":"Listolier","value":3},{"source":"Favourite","target":"Fameuil","value":3},{"source":"Favourite","target":"Blacheville","value":4},{"source":"Dahlia","target":"Tholomyes","value":3},{"source":"Dahlia","target":"Listolier","value":3},{"source":"Dahlia","target":"Fameuil","value":3},{"source":"Dahlia","target":"Blacheville","value":3},{"source":"Dahlia","target":"Favourite","value":5},{"source":"Zephine","target":"Tholomyes","value":3},{"source":"Zephine","target":"Listolier","value":3},{"source":"Zephine","target":"Fameuil","value":3},{"source":"Zephine","target":"Blacheville","value":3},{"source":"Zephine","target":"Favourite","value":4},{"source":"Zephine","target":"Dahlia","value":4},{"source":"Fantine","target":"Tholomyes","value":3},{"source":"Fantine","target":"Listolier","value":3},{"source":"Fantine","target":"Fameuil","value":3},{"source":"Fantine","target":"Blacheville","value":3},{"source":"Fantine","target":"Favourite","value":4},{"source":"Fantine","target":"Dahlia","value":4},{"source":"Fantine","target":"Zephine","value":4},{"source":"Fantine","target":"Marguerite","value":2},{"source":"Fantine","target":"Valjean","value":9},{"source":"Mme.Thenardier","target":"Fantine","value":2},{"source":"Mme.Thenardier","target":"Valjean","value":7},{"source":"Thenardier","target":"Mme.Thenardier","value":13},{"source":"Thenardier","target":"Fantine","value":1},{"source":"Thenardier","target":"Valjean","value":12},{"source":"Cosette","target":"Mme.Thenardier","value":4},{"source":"Cosette","target":"Valjean","value":31},{"source":"Cosette","target":"Tholomyes","value":1},{"source":"Cosette","target":"Thenardier","value":1},{"source":"Javert","target":"Valjean","value":17},{"source":"Javert","target":"Fantine","value":5},{"source":"Javert","target":"Thenardier","value":5},{"source":"Javert","target":"Mme.Thenardier","value":1},{"source":"Javert","target":"Cosette","value":1},{"source":"Fauchelevent","target":"Valjean","value":8},{"source":"Fauchelevent","target":"Javert","value":1},{"source":"Bamatabois","target":"Fantine","value":1},{"source":"Bamatabois","target":"Javert","value":1},{"source":"Bamatabois","target":"Valjean","value":2},{"source":"Perpetue","target":"Fantine","value":1},{"source":"Simplice","target":"Perpetue","value":2},{"source":"Simplice","target":"Valjean","value":3},{"source":"Simplice","target":"Fantine","value":2},{"source":"Simplice","target":"Javert","value":1},{"source":"Scaufflaire","target":"Valjean","value":1},{"source":"Woman1","target":"Valjean","value":2},{"source":"Woman1","target":"Javert","value":1},{"source":"Judge","target":"Valjean","value":3},{"source":"Judge","target":"Bamatabois","value":2},{"source":"Champmathieu","target":"Valjean","value":3},{"source":"Champmathieu","target":"Judge","value":3},{"source":"Champmathieu","target":"Bamatabois","value":2},{"source":"Brevet","target":"Judge","value":2},{"source":"Brevet","target":"Champmathieu","value":2},{"source":"Brevet","target":"Valjean","value":2},{"source":"Brevet","target":"Bamatabois","value":1},{"source":"Chenildieu","target":"Judge","value":2},{"source":"Chenildieu","target":"Champmathieu","value":2},{"source":"Chenildieu","target":"Brevet","value":2},{"source":"Chenildieu","target":"Valjean","value":2},{"source":"Chenildieu","target":"Bamatabois","value":1},{"source":"Cochepaille","target":"Judge","value":2},{"source":"Cochepaille","target":"Champmathieu","value":2},{"source":"Cochepaille","target":"Brevet","value":2},{"source":"Cochepaille","target":"Chenildieu","value":2},{"source":"Cochepaille","target":"Valjean","value":2},{"source":"Cochepaille","target":"Bamatabois","value":1},{"source":"Pontmercy","target":"Thenardier","value":1},{"source":"Boulatruelle","target":"Thenardier","value":1},{"source":"Eponine","target":"Mme.Thenardier","value":2},{"source":"Eponine","target":"Thenardier","value":3},{"source":"Anzelma","target":"Eponine","value":2},{"source":"Anzelma","target":"Thenardier","value":2},{"source":"Anzelma","target":"Mme.Thenardier","value":1},{"source":"Woman2","target":"Valjean","value":3},{"source":"Woman2","target":"Cosette","value":1},{"source":"Woman2","target":"Javert","value":1},{"source":"MotherInnocent","target":"Fauchelevent","value":3},{"source":"MotherInnocent","target":"Valjean","value":1},{"source":"Gribier","target":"Fauchelevent","value":2},{"source":"Mme.Burgon","target":"Jondrette","value":1},{"source":"Gavroche","target":"Mme.Burgon","value":2},{"source":"Gavroche","target":"Thenardier","value":1},{"source":"Gavroche","target":"Javert","value":1},{"source":"Gavroche","target":"Valjean","value":1},{"source":"Gillenormand","target":"Cosette","value":3},{"source":"Gillenormand","target":"Valjean","value":2},{"source":"Magnon","target":"Gillenormand","value":1},{"source":"Magnon","target":"Mme.Thenardier","value":1},{"source":"Mlle.Gillenormand","target":"Gillenormand","value":9},{"source":"Mlle.Gillenormand","target":"Cosette","value":2},{"source":"Mlle.Gillenormand","target":"Valjean","value":2},{"source":"Mme.Pontmercy","target":"Mlle.Gillenormand","value":1},{"source":"Mme.Pontmercy","target":"Pontmercy","value":1},{"source":"Mlle.Vaubois","target":"Mlle.Gillenormand","value":1},{"source":"Lt.Gillenormand","target":"Mlle.Gillenormand","value":2},{"source":"Lt.Gillenormand","target":"Gillenormand","value":1},{"source":"Lt.Gillenormand","target":"Cosette","value":1},{"source":"Marius","target":"Mlle.Gillenormand","value":6},{"source":"Marius","target":"Gillenormand","value":12},{"source":"Marius","target":"Pontmercy","value":1},{"source":"Marius","target":"Lt.Gillenormand","value":1},{"source":"Marius","target":"Cosette","value":21},{"source":"Marius","target":"Valjean","value":19},{"source":"Marius","target":"Tholomyes","value":1},{"source":"Marius","target":"Thenardier","value":2},{"source":"Marius","target":"Eponine","value":5},{"source":"Marius","target":"Gavroche","value":4},{"source":"BaronessT","target":"Gillenormand","value":1},{"source":"BaronessT","target":"Marius","value":1},{"source":"Mabeuf","target":"Marius","value":1},{"source":"Mabeuf","target":"Eponine","value":1},{"source":"Mabeuf","target":"Gavroche","value":1},{"source":"Enjolras","target":"Marius","value":7},{"source":"Enjolras","target":"Gavroche","value":7},{"source":"Enjolras","target":"Javert","value":6},{"source":"Enjolras","target":"Mabeuf","value":1},{"source":"Enjolras","target":"Valjean","value":4},{"source":"Combeferre","target":"Enjolras","value":15},{"source":"Combeferre","target":"Marius","value":5},{"source":"Combeferre","target":"Gavroche","value":6},{"source":"Combeferre","target":"Mabeuf","value":2},{"source":"Prouvaire","target":"Gavroche","value":1},{"source":"Prouvaire","target":"Enjolras","value":4},{"source":"Prouvaire","target":"Combeferre","value":2},{"source":"Feuilly","target":"Gavroche","value":2},{"source":"Feuilly","target":"Enjolras","value":6},{"source":"Feuilly","target":"Prouvaire","value":2},{"source":"Feuilly","target":"Combeferre","value":5},{"source":"Feuilly","target":"Mabeuf","value":1},{"source":"Feuilly","target":"Marius","value":1},{"source":"Courfeyrac","target":"Marius","value":9},{"source":"Courfeyrac","target":"Enjolras","value":17},{"source":"Courfeyrac","target":"Combeferre","value":13},{"source":"Courfeyrac","target":"Gavroche","value":7},{"source":"Courfeyrac","target":"Mabeuf","value":2},{"source":"Courfeyrac","target":"Eponine","value":1},{"source":"Courfeyrac","target":"Feuilly","value":6},{"source":"Courfeyrac","target":"Prouvaire","value":3},{"source":"Bahorel","target":"Combeferre","value":5},{"source":"Bahorel","target":"Gavroche","value":5},{"source":"Bahorel","target":"Courfeyrac","value":6},{"source":"Bahorel","target":"Mabeuf","value":2},{"source":"Bahorel","target":"Enjolras","value":4},{"source":"Bahorel","target":"Feuilly","value":3},{"source":"Bahorel","target":"Prouvaire","value":2},{"source":"Bahorel","target":"Marius","value":1},{"source":"Bossuet","target":"Marius","value":5},{"source":"Bossuet","target":"Courfeyrac","value":12},{"source":"Bossuet","target":"Gavroche","value":5},{"source":"Bossuet","target":"Bahorel","value":4},{"source":"Bossuet","target":"Enjolras","value":10},{"source":"Bossuet","target":"Feuilly","value":6},{"source":"Bossuet","target":"Prouvaire","value":2},{"source":"Bossuet","target":"Combeferre","value":9},{"source":"Bossuet","target":"Mabeuf","value":1},{"source":"Bossuet","target":"Valjean","value":1},{"source":"Joly","target":"Bahorel","value":5},{"source":"Joly","target":"Bossuet","value":7},{"source":"Joly","target":"Gavroche","value":3},{"source":"Joly","target":"Courfeyrac","value":5},{"source":"Joly","target":"Enjolras","value":5},{"source":"Joly","target":"Feuilly","value":5},{"source":"Joly","target":"Prouvaire","value":2},{"source":"Joly","target":"Combeferre","value":5},{"source":"Joly","target":"Mabeuf","value":1},{"source":"Joly","target":"Marius","value":2},{"source":"Grantaire","target":"Bossuet","value":3},{"source":"Grantaire","target":"Enjolras","value":3},{"source":"Grantaire","target":"Combeferre","value":1},{"source":"Grantaire","target":"Courfeyrac","value":2},{"source":"Grantaire","target":"Joly","value":2},{"source":"Grantaire","target":"Gavroche","value":1},{"source":"Grantaire","target":"Bahorel","value":1},{"source":"Grantaire","target":"Feuilly","value":1},{"source":"Grantaire","target":"Prouvaire","value":1},{"source":"MotherPlutarch","target":"Mabeuf","value":3},{"source":"Gueulemer","target":"Thenardier","value":5},{"source":"Gueulemer","target":"Valjean","value":1},{"source":"Gueulemer","target":"Mme.Thenardier","value":1},{"source":"Gueulemer","target":"Javert","value":1},{"source":"Gueulemer","target":"Gavroche","value":1},{"source":"Gueulemer","target":"Eponine","value":1},{"source":"Babet","target":"Thenardier","value":6},{"source":"Babet","target":"Gueulemer","value":6},{"source":"Babet","target":"Valjean","value":1},{"source":"Babet","target":"Mme.Thenardier","value":1},{"source":"Babet","target":"Javert","value":2},{"source":"Babet","target":"Gavroche","value":1},{"source":"Babet","target":"Eponine","value":1},{"source":"Claquesous","target":"Thenardier","value":4},{"source":"Claquesous","target":"Babet","value":4},{"source":"Claquesous","target":"Gueulemer","value":4},{"source":"Claquesous","target":"Valjean","value":1},{"source":"Claquesous","target":"Mme.Thenardier","value":1},{"source":"Claquesous","target":"Javert","value":1},{"source":"Claquesous","target":"Eponine","value":1},{"source":"Claquesous","target":"Enjolras","value":1},{"source":"Montparnasse","target":"Javert","value":1},{"source":"Montparnasse","target":"Babet","value":2},{"source":"Montparnasse","target":"Gueulemer","value":2},{"source":"Montparnasse","target":"Claquesous","value":2},{"source":"Montparnasse","target":"Valjean","value":1},{"source":"Montparnasse","target":"Gavroche","value":1},{"source":"Montparnasse","target":"Eponine","value":1},{"source":"Montparnasse","target":"Thenardier","value":1},{"source":"Toussaint","target":"Cosette","value":2},{"source":"Toussaint","target":"Javert","value":1},{"source":"Toussaint","target":"Valjean","value":1},{"source":"Child1","target":"Gavroche","value":2},{"source":"Child2","target":"Gavroche","value":2},{"source":"Child2","target":"Child1","value":3},{"source":"Brujon","target":"Babet","value":3},{"source":"Brujon","target":"Gueulemer","value":3},{"source":"Brujon","target":"Thenardier","value":3},{"source":"Brujon","target":"Gavroche","value":1},{"source":"Brujon","target":"Eponine","value":1},{"source":"Brujon","target":"Claquesous","value":1},{"source":"Brujon","target":"Montparnasse","value":1},{"source":"Mme.Hucheloup","target":"Bossuet","value":1},{"source":"Mme.Hucheloup","target":"Joly","value":1},{"source":"Mme.Hucheloup","target":"Grantaire","value":1},{"source":"Mme.Hucheloup","target":"Bahorel","value":1},{"source":"Mme.Hucheloup","target":"Courfeyrac","value":1},{"source":"Mme.Hucheloup","target":"Gavroche","value":1},{"source":"Mme.Hucheloup","target":"Enjolras","value":1}]}
    private simulation:any=null

    private clickFlag:any=null
    mounted() {
        this.initD2()
    }

    private initD2(){
            var dome:any=this.$refs.canvas
            var that=this
            var D3Main=this.$refs.reference
            var width = D3Main.offsetWidth
            var height = 700;

            
            console.log(width,height)
            this.simulation = d3.forceSimulation(that.data.nodes)
                .force("link", d3.forceLink(that.data.links).id(d => d.id).distance(300))   //distance设置连线距离
                // .force("charge", d3.forceManyBody())
                .force("center", d3.forceCenter(width / 2, height / 2))  //设置力学仿真器的中心
                // .force('stop', true)
                // .force("x", d3.forceX())
                // .force("y", d3.forceY())
                .on("tick", ticked);
            const lineTextFontSize = 12;
            var svg = d3.select("#canvas")
                .append("svg")
                // .attr("width", width)
                // .attr("height", height)
                .attr("viewBox", [0, 0, width, height])
                // .attr("viewBox", `0 0 2000 500 `)
                .call(d3.zoom() //创建缩放行为
                    .scaleExtent([-100,100])//设置缩放范围
                    .on('zoom',zoom_actions)); 
            // console.log(dome,'dddd')
            // dome.addEventListener("drop", (event: any) => {
            //     console.log('1111')
            //     event.preventDefault();
            // })
            // debugger
            //初始化力学仿真器，通过布局函数格式化数据    
              
        
            
            
            //添加group包裹svg元素以进行缩放，目的是在缩放时不会影响整个容器的位置
            var g :any= svg.append("g")
            .attr("class", "everything");
            // 绘制连线
            var svg_links:any = g.append('g')
                .attr('class', 'svg_line_data')
                .selectAll("line")
                .data(that.data.links)
                .enter()
                .append("line")
                .style("stroke", "#ccc")
                .style("stroke-width", 3)
                .on('mouseover',mouseover)
                .on('mouseout',mouseout)
                .on('dblclick',linkdblclick)
                
                
            var svg_links_name:any=g.append('g')
                .selectAll("text")
                .data(that.data.links)
                .enter()
                .append("text")
                .style("fill", "black")
                .attr("dx", 20)
                .attr("dy", 8)
                .text(function (d) {
                    return d.name;
                });
                
                
            // 绘制节点    
            var svg_nodes:any = g.append("g")
                .attr('class', 'svg_nodes_data')
                .selectAll('node')
                .data(that.data.nodes)
                .enter()
                .append('g')
                .attr('class', 'node')
                .on('click',clicknode)
                .on('dblclick',dbclicknode)
                .on('mouseover',mouseovernode)
                .on('mouseout',mouseoutnode)
                .call(d3.drag().on("start", dragstarted) //d3.drag() 创建一个拖曳行为
                .on("drag", dragged)
                .on("end", dragended)
                )
                svg_nodes.append("circle")
                .attr('index',d=>{ return d.id})
                .attr("stroke", '#017bff')
                .attr("stroke-width", 2)
                .attr("r", 18)
                .attr("fill", "#69bef7")
                
            
            svg_nodes.append('text')
                .style("fill", "#fff")
                .attr("dominant-baseline","middle")
                .attr("text-anchor", "middle")
                .attr("z-index", 999)
                .text(d => {
                    let label = d.name;
                    // return String(label).length <= 3 ? label : (label.substr(0, 3) + '..');
                });
        
            // //绘制描述节点的文字
            // var svg_texts =  g.append('g')
            //     .selectAll("text")
            //     .data(that.nodesdata)
            //     .enter()
            //     .append("text")
            //     .style("fill", "black")
            //     .text(d => {
            //         let label = d.name;
            //         return String(label).length <= 3 ? label : (label.substr(0, 3) + '..');
            //     });

                
            // // 连线的文字
            // const lineText = g.append('g').selectAll('.linetext')
            //     .data(links)
            //     .enter()
            //     .append('text')
            //     .style('font-size', 12)
            //     .attr("class", 'linetext')
            //     .attr("dx", link => getLineTextDx(link))
            //     .attr("dy", link => getLineTextDy(link))
            //     .text(link => link.name);

            function getLineTextDx(d:any) {
                // var data=JSON.parse()
                const sx = d.source.x;
                const sy = d.source.y;
                const tx = d.target.x;
                const ty = d.target.y;
                // console.log(data)
                if(sx>tx){
                    return (sx-tx)/2+tx
                }else{
                    return (tx-sx)/2+sx
                }
                
            }
            function getLineTextDy(d:any) {
                const sx = d.source.x;
                const sy = d.source.y;
                const tx = d.target.x;
                const ty = d.target.y;
                if(sy>ty){
                    return (sy-ty)/2+ty
                }else{
                    return (ty-sy)/2+sy
                }
                
            }
            //监听拖拽开始    
            function dragstarted(d:any) {
                if (!d3.event.active) that.simulation.alphaTarget(0.3).restart(); //alpha是动画的冷却系数，运动过程中会不断减小，直到小于0.005为止，此时动画会停止。
                d.fx = d.x;    //fx为固定坐标，x为初始坐标  注3>  
                d.fy = d.y;
        }

        //监听拖拽中  
        function dragged(d:any) {
            d.fx = d3.event.x;  //fevent.x为拖拽移动时的坐标
            d.fy = d3.event.y;
        }

        //监听拖拽结束
        function dragended(d:any) {
            if (!d3.event.active) that.simulation.alphaTarget(0);
            d.fx = null;        //固定坐标清空
            d.fy = null;
        }

        function zoom_actions() { 
            g.attr("transform", d3.event.transform)
        }

        //拖拽时的事件监听器  以实时更新坐标
        function ticked() {
            svg_links.attr("x1", function (d:any) {
                return d.source.x;
            })
            .attr("y1", function (d:any) {
                return d.source.y;
            })
            .attr("x2", function (d:any) {
                return d.target.x;
            })
            .attr("y2", function (d:any) {
                return d.target.y;
            })
            .attr('index',d => {return d.id})
            
            svg_nodes.attr("transform", function(d: any) {
                return "translate(" + d.x + "," + d.y + ")";
            });
            // svg_texts.attr("transform", function(d: any) {
            //     return "translate(" + d.x + "," + d.y + ")";
            // });
            svg_links_name.attr("transform", function(d: any) {
                const rotate = -Math.atan((d.target.y - d.source.y) / (d.source.x - d.target.x)) / (Math.PI / 180);
                return `translate(${((d.target.x - d.source.x) / 2 + d.source.x) - 4},${((d.target.y - d.source.y) / 2 + d.source.y - 5)}) rotate(${rotate})`;
            });
           
        }
         function clicknode(d:any){
                if(that.clickFlag) {//取消上次延时未执行的方法
                    that.clickFlag = clearTimeout(that.clickFlag);
                }
                console.log(d)
                that.clickFlag = setTimeout(function() {
                }, 300);//延时300毫秒执行
            }

            function dbclicknode(d:any){
                if(that.clickFlag) {//取消上次延时未执行的方法
                    that.clickFlag = clearTimeout(that.clickFlag);
                }
                console.log(d)
                
                d3.event.stopPropagation();
                
            }
            function mouseover(d){
                var foce=d3.select("svg")
                foce.select(`line[index="${d.id}"]`).classed('svg_lin_stroke',true).append('path')
            }
            function mouseout(d){
                // console.log(d,'111')
                var foce=d3.select("svg")
                
                foce.select(`line[index="${d.id}"]`).classed('svg_lin_stroke',false)
            }
            function linkdblclick(d){
                // that.nodesdata.filter(item=>{return item.name!==d.})
                console.log(d)
            }

            function mouseovernode(d){
                var foce=d3.select("svg")

                foce.select(`circle[index="${d.id}"]`).classed('svg_lin_stroke',true)
            }
            function mouseoutnode(d){
                // console.log(d,'111')
                var foce=d3.select("svg")

                foce.select(`circle[index="${d.id}"]`).classed('svg_lin_stroke',false)
            }
    }
}
</script>

<style lang='scss'>
    .main-box{
        box-sizing: border-box;
        background:transparent;
        border: 1px solid #448dcc ;
        box-shadow: 0px 2px 20px #757575;
        overflow: hidden;
        width: 98vw;
        height: 82vh;
        .clearfix{
            background:#153454;
            color: #fff;
            border: 1px solid #448dcc !important;
            box-shadow: inset 0 0 25px 0 rgba(79, 170, 255, 0.6) !important;
            height: 35px;
            padding: 0 10px;
            box-sizing: border-box;
            line-height:35px;
            display: flex;
            justify-content:space-between;
        }
        .D3Main{
            // padding: 20px;
            height: 100%;
            width: 100%;
            background:#153454;
            box-sizing: border-box;
           .D3Cabvas{
                height: 700px;
                width: 100%;
           }
        }

    }
</style>